<!doctype html>
<html ng-app="routerApp">
<head>
    <meta charset="UTF-8">
    <title>MR,Chen前端</title>
    <link rel="stylesheet" href="http://cdn.bootcss.com/bootstrap/3.0.2/css/bootstrap.min.css">
    <link rel="stylesheet" href="js/ng-grid-2.0.12/ng-grid.css">
    <script src="js/jquery-1.9.1.js"></script>
    <script src="js/angular-1.3.0.14/angular.js"></script>
    <script src="js/angular-1.3.0.14/angular-animate.min.js"></script>
    <script src="js/angular-ui-router.js"></script>
    <script src="js/ui-bootstrap-tpls-0.11.0.js"></script>
    <script src="js/ng-grid-2.0.12/ng-grid.debug.js"></script>
    <script src="js/page.js"></script>
    <link rel="stylesheet" href="css/animations.css">

    <link rel="stylesheet" href="css/app.css">
    <script src="js/app.js"></script>
    <script src="js/animations.js"></script>
    <script src="js/controllers.js"></script>
    <script src="js/filters.js"></script>
    <script src="js/services.js"></script>
    <link rel="stylesheet" href="css/normalize.css">

    <link rel="stylesheet" href="css/style.css" media="screen" type="text/css" />

</head>

<body>
    <!--首先在首页定义一个视图，让路由来控制-->
    <div style="background-image:url(8129519.jpg);background-position: center 0;width: 100%;height:1580px;position: absolute;z-index: 100; background-size:1920px 100%">
        <div ui-view></div>
    </div>

    <div style="text-align:center;clear:both;position:absolute;top:0;left:260px">
    </div>
    <canvas class="canvas" style="position: absolute;top:0; z-index: 200;background-image:url(8129519.jpg)"></canvas>

    <div class="help" style="display: none">?</div>

    <div class="ui" style="display: none">
        <input class="ui-input" type="text" />
        <span class="ui-return">↵</span>
    </div>

    <div class="overlay">
        <div class="tabs">
            <div class="tabs-labels"><span class="tabs-label">Commands</span><span class="tabs-label">Info</span><span class="tabs-label">Share</span></div>

            <div class="tabs-panels">
                <ul class="tabs-panel commands">
                    <li class="commands-item"><span class="commands-item-title">Text</span><span class="commands-item-info" data-demo="Hello :)">Type anything</span><span class="commands-item-action">Demo</span></li>
                    <li class="commands-item"><span class="commands-item-title">Countdown</span><span class="commands-item-info" data-demo="#countdown 10">#countdown<span class="commands-item-mode">number</span></span><span class="commands-item-action">Demo</span></li>
                    <li class="commands-item"><span class="commands-item-title">Time</span><span class="commands-item-info" data-demo="#time">#time</span><span class="commands-item-action">Demo</span></li>
                    <li class="commands-item"><span class="commands-item-title">Rectangle</span><span class="commands-item-info" data-demo="#rectangle 30x15">#rectangle<span class="commands-item-mode">width x height</span></span><span class="commands-item-action">Demo</span></li>
                    <li class="commands-item"><span class="commands-item-title">Circle</span><span class="commands-item-info" data-demo="#circle 25">#circle<span class="commands-item-mode">diameter</span></span><span class="commands-item-action">Demo</span></li>

                    <li class="commands-item commands-item--gap"><span class="commands-item-title">Animate</span><span class="commands-item-info" data-demo="The time is|#time|#countdown 3|#icon thumbs-up"><span class="commands-item-mode">command1</span>&nbsp;|<span class="commands-item-mode">command2</span></span><span class="commands-item-action">Demo</span></li>
                </ul>
            </div>
        </div>
    </div>

    <script src="js/index.js"></script>
    <script>
        window.onload = function () {
            var canvas = document.querySelector('canvas');
            var content = document.querySelector('.container');
            canvas.onclick = function () {
                canvas.style.display = 'none';
                content.style.display = 'block';
            };
            setTimeout(function () {
                canvas.style.display = 'none';
                content.style.display = 'block';
            }, 10000)
        }
    </script>
</body>
</html>